<template>
	<view class="post" :class="{'isPadLeft':!isPadLeft}" v-if="post" @tap.stop.prevent="openPostDetils(post)">
		<view class="post-info" v-if="post_type == 0">
			<view class="head" @tap.stop.prevent="clickHead()">
				<image :src="post.avatar + '?imageView2/3/w/500/h/500'" mode="aspectFill"
					:style="{'width': size,'height': size,borderRadius: '50%'}">
				</image>
			</view>
			<view class="user-info" :style="'width: calc(100% - '+size+' - 16rpx);'">
				<view class="user-info-header">
					<view class="user-name onelist-hidden">
						{{post.nickName}}
					</view>
					<view class="recommend" :class="{'no_recommend': post.recommendState == 0}">
						{{post.recommendState == 0 ? '不推荐':'推荐'}}
					</view>
				</view>
				<view class="data">{{post.createTime || post.createTimeStr}}</view>
			</view>
		</view>

		<view class="post-info dynamic" v-else>
			<view class="head" @tap.stop.prevent="clickHead(post)">
				<image :src="post.avatar + '?imageView2/3/w/500/h/500'" mode="aspectFill"
					:style="{'width': size,'height': size,borderRadius: '50%'}">
				</image>
			</view>
			<view class="user-info" :style="'width: calc(100% - '+size+' - 16rpx);'">
				<view class="user-info-header">
					<view class="user-name onelist-hidden">
						{{post.nickName}}
						<view class="auditing" v-if="from == 'myPost' && post.auditState == 2">审核中</view>
						<view class="audit-f" v-if="from == 'myPost' && post.auditState == 3">已驳回</view>
					</view>
					<view v-if="from == 'myPost'" class="dy-iconfont icon-caidan" @tap.stop.prevent="selectMedia">
					</view>
					<!-- <view class="data">{{post.createTimeStr}}</view> -->
					<view v-if="post.cityName && from != 'myPost'">
						<view class="place">{{post.cityName}}</view>
					</view>
				</view>
				<!-- <view class="data-browse">{{post.views || 0}}浏览</view> -->
				<view class="data-browse">{{post.views || 0}}浏览</view>
				<!-- <view class="data-browse">{{post.createTimeStr | timeDisposal(post.createTime)}} · {{post.views || 0}}浏览</view> -->
			</view>
		</view>
		<view class="content">
			<view :class="{'content-c': from != 'details'}">{{post.content}}</view>
			<view class="location" @tap.stop.prevent="openLocation" v-if="post.location">📍{{post.location}}</view>
		</view>

		<image-arrange v-if="post.forumPictureList" :imageList="post.forumPictureList" :isPadLeft="isPadLeft"
			:basicsWidth="basicsWidth" @clickVideo="clickVideo" @previewImg="previewImg" :from="from"></image-arrange>
		<view class="other-functions" v-if="post_type != 0">
			<view class="hot-evaluate onelist-hidden" v-if="post.forumTopComment">
				<text style="font-weight: 900; margin-right: 24rpx;">热评</text>
				{{post.forumTopComment.comment}}
			</view>
			<view class="operate-fun">
				<view class="topic onelist-hidden" v-if="post.topicName && from != 'topic' && post.topicShelfState == 1"
					@tap.stop.prevent="openTopic">
					#{{post.topicName}}</view>
				<view class="operate" v-if="from != 'details'">
					<!-- <button class="share" type="default" open-type="share" @tap.stop.prevent="share">分享</button> -->
					<view class="share" @tap.stop.prevent="share">分享</view>
					<view class="appraise" @tap.stop.prevent="onappraise">{{post.forumCommentNum || 0}}</view>
					<!-- <view class="no-zan" v-if="!postData.forumLikeState && post.forumLikeNum <= 0"
						@tap.stop.prevent="topicUpvote(post)"></view> -->
					<view class="no-zan-d" v-if="!postData.forumLikeState && post.forumLikeNum > -1"
						@tap.stop.prevent="topicUpvote(post)">
						<text class="likeNum">{{post.forumLikeNum | likeNum}}</text>
					</view>
					<view class="zan" v-else @tap.stop.prevent="cancelForumLike(postData)">
						<text class="likeNum">{{post.forumLikeNum | likeNum}}</text>
					</view>
				</view>
				<view class="zan-animation" :class="{'vanish-animation':postData.vanish_animation}"
					v-if="postData.animation">
					<view class="animation-step-1">
						<image style="width: 100%; height: 100%;"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-header.png">
						</image>
					</view>
					<view class="animation-step-2">
						<image style="width: 100%; height: 100%;"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-bg.png">
						</image>
					</view>
					<view class="animation-step-3">
						<image style="width: 100%; height: 100%;"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan-mj.png">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="class-heading-p" v-if="post.pengCategoryVo && from != 'myPost'">
			<view class="class-heading" @tap.stop.prevent="getTK(post)">
				<view class="left">
					<view class="category">{{post.pengCategoryVo.categoryName}}</view>
					<view class="pirce"> <text style="font-size: 24rpx;">￥</text> <text>{{parseInt(post.pengCategoryVo.pengActualPrice)}}</text> <text style="font-size: 24rpx;">.00</text> </view>
				</view>
				<view class="right">GET同款</view>
			</view>
		</view>
		<view class="class-heading-p" v-if="from == 'myPost' && post.auditState == 3">
			<view class="class-heading reject" @tap.stop.prevent="getTK(post)">
				<view class="left">
					<view class="category">驳回理由</view>
					<view class="pirce"> <text>{{post.reviewComments}}</text> </view>
				</view>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
		<slot></slot>
	</view>
</template>

<script>
	const app = getApp();
	import {
		timeFrom
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	export default {
		data() {
			return {
				labelList: [{}, {}, {}],
				postData: null,
			};
		},
		options: {
			styleIsolation: 'shared'
		},
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			// 头像尺寸
			size: {
				type: [String, Number],
				default: '225'
			},
			basicsWidth: {
				type: [String, Number],
				default: 280
			},
			isPadLeft: {
				type: Boolean,
				default: true
			},
			post_type: {
				type: Number,
				default: 0
			},
			postIndex: {
				type: Number,
				default: 0
			},
			post: {
				type: Object,
				default: ""
			},
			from: {
				type: [String, Number],
				default: ''
			},
			// 
			state: {
				type: [String, Number],
				default: 1
			},
		},
		filters: {
			timeDisposal(value1, value2) {
				let time = value2.replaceAll('-', '/');
				if (!value1) {
					return timeFrom(new Date(time).getTime(), false)
				} else if (value1.search('小时') == -1) {
					return value1
				} else {
					return timeFrom(new Date(time).getTime(), false)
				}
			},
			likeNum(value) {
				if (value > 10000) {
					return (value / 10000).toFixed(2);
				} else {
					return value
				}
			}
		},
		watch: {
			post: {
				handler: function(newVal) {
					this.setData({
						postData: Object.assign(newVal, {
							type: 'post'
						}),
					});
				},
				immediate: true,
				deep: true,
			},
		},
		computed: {},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(url, type) {
				if (type) {
					return
				}
				app.navigationTo(url);
			},
			clickVideo(item) {
				uni.navigateTo({
					url: '/page_community/details/details?id=' + this.postData.id,
				});
			},
			previewImg() {
				this.$emit('previewImg', this.postData)
			},
			openPostDetils() {
				if (this.from == 'details') {
					return
				}
				if (this.post_type == 0) {
					return
				}
				if (this.state != 1) {
					return
				}

				uni.navigateTo({
					url: '/page_community/details/details?id=' + this.postData.id,
				});
			},
			selectMedia() {
				this.$emit('selectMedia', {
					'item': this.postData,
					'index': this.postIndex,
				})
			},
			clickHead(item) {
				if (!item) {
					this.$refs.toast.show({
						type: 'default',
						message: "该用户暂未入驻接单哦~"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				this.$emit('clickHead', item);
			},
			openLocation() {
				wx.openLocation({
					latitude: Number(this.postData.locationLongitude),
					longitude: Number(this.postData.locationLatitude),
					scale: 18,
					name: this.postData.location
				})
			},
			openTopic() {
				let topic = JSON.stringify(this.postData)
				uni.navigateTo({
					url: '/page_community/topic/topic?topic=' + topic,
				});
			},
			getTK(topic) {
				app.navigationTo('page_sharing/accompany/details?id=' + topic.userId + '&from=1')
			},
			cancelForumLike(post) {
				if (!app.globalData.isLogin) {
					this.postData.forumLikeState = 0
					this.postData.forumLikeNum = this.postData.forumLikeNum - 1
					return
				}
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-topic/give-like', {
						giveId: post.id,
						giveType: 0
					}, (result) => {
						this.postData.forumLikeState = 0
						this.postData.forumLikeNum = this.postData.forumLikeNum - 1
						resolve()
					}, null, (err) => {})
				})
			},
			topicUpvote(post) {
				if (!app.globalData.isLogin) {
					this.upvote()
					return
				}
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-topic/give-like', {
						giveId: post.id,
						giveType: 0
					}, (result) => {
						this.upvote()
						resolve()
					}, null, (err) => {})
				})
			},
			onUpvote() {
				this.postData.animation = true
				this.postData.forumLikeState = 1
				this.postData.forumLikeNum += 1
				setTimeout(() => {
					this.postData.vanish_animation = true
				}, 1000)
				setTimeout(() => {
					this.postData.animation = false
					this.postData.vanish_animation = false
					console.log(this.postData.forumLikeNum);
				}, 1300)
			},
			upvote() {
				throttle(this.onUpvote(), 1300, true)
			},
			share() {
				// this.$emit('share', this.postData)
				this.$emit('share', this.postData)
			},
			onappraise() {
				this.$emit('comment', this.postData)
			}
		}
	};
</script>
<style lang="scss">
	.post {
		&.isPadLeft {
			.content {
				padding-left: 0;
			}

			.other-functions {
				padding-left: 0;
			}

			.class-heading-p {
				padding-left: 0;
			}
		}

		.post-info {
			display: flex;
			width: 100%;
			margin-bottom: 22rpx;



			.head {
				flex-shrink: 0;
				margin-right: 16rpx;
			}

			&.dynamic {
				.head {
					display: flex;
				}

				.user-info {
					.user-info-header {
						// flex-direction: column;
						// align-items: flex-start;
					}
				}
			}

			.user-info {
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;

				.user-info-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 5rpx;
					width: 100%;

					.user-name {
						font-size: 28rpx;
						font-weight: 900;
						color: #222222;
						line-height: 44rpx;
						margin-right: 20rpx;

						.auditing,
						.audit-f {
							display: inline-block;
							box-sizing: border-box;
							padding: 1rpx 15rpx 1rpx 42rpx;
							background: linear-gradient(270deg, #FFBF12 0%, rgba(255, 191, 18, 0) 100%);
							border-radius: 30rpx;
							line-height: 33rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #282D2D;
							position: relative;
							margin-left: 20rpx;

							&::before {
								content: "";
								display: block;
								width: 48rpx;
								height: 48rpx;
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/no_rz.png');
								background-size: 100%;
								position: absolute;
								left: -10rpx;
								bottom: 50%;
								transform: translateY(50%);
							}
						}
					}

					.icon-caidan {
						flex-shrink: 0;
						font-size: 26rpx;
						font-weight: 400;
						color: #272636;
						position: relative;
						z-index: 2;
					}

					.data {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 44rpx;
						flex-shrink: 0;
					}

					.place {
						font-size: 24rpx;
						font-weight: 400;
						color: #BBBCBB;
						line-height: 30rpx;

						&::before {
							font-family: "dy-iconfont";
							content: "\e66e";
							font-size: 28rpx;
							padding-right: 7rpx;
							box-sizing: border-box;
						}
					}

					.recommend {
						flex-shrink: 0;
						box-sizing: border-box;
						padding: 1rpx 15rpx 1rpx 42rpx;
						background: linear-gradient(270deg, #D3FB33 0%, rgba(167, 245, 23, 0) 100%);
						border-radius: 30rpx;
						line-height: 33rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #282D2D;
						position: relative;

						&::before {
							content: "";
							display: block;
							width: 48rpx;
							height: 48rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/recommend.png');
							background-size: 100%;
							position: absolute;
							left: -10rpx;
							bottom: 50%;
							transform: translateY(50%);
						}

						&.no_recommend {
							background: linear-gradient(270deg, #FF4664 0%, rgba(255, 70, 100, 0) 100%);

							&::before {
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/no_ recommend.png');
							}
						}
					}
				}

				.data-browse {
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 33rpx;
				}

				.label {
					display: flex;

					.label-item {
						box-sizing: border-box;
						padding: 4rpx 12rpx;
						background: #EFF9E6;
						border-radius: 8rpx;
						margin-right: 12rpx;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 28rpx;
						color: #6D9E15;
					}

					.label-item-major {
						padding: 4rpx 12rpx 4rpx 115rpx;
						background: linear-gradient(130deg, #FFFBEB 0%, #FFF1C1 48%, #FFF5D3 100%);
						position: relative;
						color: #8E4400;

						&::before {
							content: "";
							display: block;
							box-sizing: border-box;
							width: 103rpx;
							height: 36rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-1.png');
							background-size: 100% 100%;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
				}

				.data {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 44rpx;
					flex-shrink: 0;
				}
			}
		}

		.content {
			box-sizing: border-box;
			padding-left: 106rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #222222;
			line-height: 44rpx;
			margin-bottom: 16rpx;
			word-break: break-all;

			.content-c {
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
			}
		}

		.location {
			font-size: 28rpx;
			font-weight: 400;
			color: #396DE8;
		}

		.other-functions {
			margin-top: 28rpx;
			box-sizing: border-box;
			padding-left: 106rpx;

			.hot-evaluate {
				height: 48rpx;
				border-radius: 12rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 48rpx;
				background: linear-gradient(to right, #EBFBC5 0%, #D4FFCA 3%, #FFFFFF 20%);
				box-sizing: border-box;
				padding-left: 24rpx;
				margin-bottom: 24rpx;
			}

			.operate-fun {
				position: relative;
				font-size: 0;
				// display: flex;
				// align-items: center;
				// justify-content: space-between;

				.topic {
					display: inline-block;
					// min-width: 238rpx;
					max-width: 100%;
					height: 45rpx;
					background: #FFF9E8;
					border-radius: 24rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #FA9B00;
					line-height: 45rpx;
					text-align: center;
					box-sizing: border-box;
					padding: 0 20rpx;
					margin-bottom: 28rpx;
				}

				.operate {
					font-size: 24rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 33rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.share {
						margin: 0;
						padding: 0;
						background: none;
						font-size: 24rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 33rpx;
						margin-right: 36rpx;
						display: flex;
						align-items: center;

						&::before {
							font-family: "dy-iconfont";
							content: "\e8b0";
							font-size: 38rpx;
							padding-right: 8rpx;
							box-sizing: border-box;
							flex-shrink: 0;
						}
					}

					.appraise {
						display: flex;
						align-items: center;

						&::before {
							font-family: "dy-iconfont";
							content: "\e632";
							font-size: 36rpx;
							padding-right: 8rpx;
							box-sizing: border-box;
							flex-shrink: 0;
						}
					}

					.zan {
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						padding-left: 36rpx;

						&::before {
							content: "";
							display: inline-block;
							box-sizing: border-box;
							width: 36rpx;
							height: 36rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan.png');
							background-size: 100% 100%;
							margin-right: 8rpx;
							flex-shrink: 0;
						}

						.likeNum {
							display: inline-block;
							min-width: 15rpx;
						}
					}

					.no-zan-d {
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						padding-left: 36rpx;
						filter: grayscale(100%);
						-webkit-filter: grayscale(100%);

						// &::before {
						// 	content: "";
						// 	display: inline-block;
						// 	box-sizing: border-box;
						// 	width: 36rpx;
						// 	height: 36rpx;
						// 	background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan.png');
						// 	background-size: 100% 100%;
						// 	margin-right: 8rpx;
						// 	flex-shrink: 0;
						// }
						&::before {
							font-family: "dy-iconfont";
							content: "\e635";
							font-size: 36rpx;
							width: 36rpx;
							height: 36rpx;
							margin-right: 8rpx;
							box-sizing: border-box;
							flex-shrink: 0;
						}

						.likeNum {
							display: inline-block;
							min-width: 15rpx;
						}
					}

					.no-zan {
						flex-shrink: 0;
						width: 106rpx;
						height: 30rpx;
						background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/no-zan.png');
						background-size: contain;
						background-repeat: no-repeat;
						background-position: right;
						padding-left: 36rpx;
					}
				}

				.zan-animation {
					position: absolute;
					width: 419rpx;
					height: 360rpx;
					right: -99rpx;
					bottom: -80rpx;

					&.vanish-animation {
						animation: vanish-animation 0.3s linear;
					}

					.animation-step-1 {
						width: 85rpx;
						height: 85rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -25%);
						z-index: 2;
					}

					.animation-step-2 {
						width: 419rpx;
						height: 360rpx;
						position: absolute;
						z-index: 1;
						-webkit-animation: animation-step-2 0.7s linear;
						animation: animation-step-2 0.7s linear;
					}

					.animation-step-3 {
						width: 74rpx;
						height: 32rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-left: calc(-74rpx / 2);
						z-index: 3;
						transform-origin: 0 0;
						-webkit-animation: animation-step-3 0.3s linear;
						animation: animation-step-3 0.3s linear;
					}
				}
			}
		}

		.class-heading-p {
			box-sizing: border-box;
			padding-left: 106rpx;

			.class-heading {
				height: 121rpx;
				background: #F6F8F7;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 16rpx 24rpx 16rpx 32rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.reject {
					justify-content: flex-start;

					.category {
						font-weight: 600;
						font-size: 26rpx;
						color: #282D2D;
						line-height: 37rpx;
					}

					.pirce {
						font-weight: 400;
						font-size: 24rpx;
						color: #282D2D;
						line-height: 33rpx;
						margin-top: 14rpx;
					}
				}
			}

			.category {
				font-weight: 400;
				font-size: 26rpx;
				color: #282D2D;
				line-height: 37rpx;
			}

			.pirce {
				font-weight: 600;
				font-size: 32rpx;
				color: #FF4664;
				line-height: 44rpx;
				margin-top: 8rpx;
			}

			.right {
				width: 136rpx;
				height: 46rpx;
				background: #0E0E0D;
				border-radius: 23rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	@-webkit-keyframes animation-step-3 {
		from {
			-webkit-transform: rotateZ(5deg);
		}

		to {
			-webkit-transform: rotateZ(0);
		}
	}

	@keyframes animation-step-3 {
		from {
			transform: rotateZ(5deg);
		}

		to {
			transform: rotateZ(0);
		}
	}

	@keyframes animation-step-2 {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes vanish-animation {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>